<template>
  <div id="MineLogin">

    <!-- 密码登录 -->
    <div class="pswLogin">
      <div class="phone">
        <span>手机号:</span>
        <input type="text" v-model="phone" ref="phoneIpt">
      </div>

      <div class="password">
        <span>密&emsp;码:</span>
        <input type="password" v-model="password" ref="passwordIpt">
      </div>
    </div>

    <!-- 登录 -->
    <div class="loginBtn">
      <button @click="login" class="banLoginBtn" ref="btn">登录</button>
    </div>

    <!-- 错误提示 -->
    <div class="errorBox" v-show="showError">
      错误
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 手机号
      phone: '',
      // 密码
      password: '',
      // 手机号的正则
      phoneCheck: '/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/',
      // 密码的正则： 8-20 位，字母、数字、英文特殊字符
      passwordCheck: "^[A-Za-z0-9!@#$%^&*\\\\(\\\\)?><\":/.,';{}]{7,20}$",
      // 错误弹窗
      showError: false
    }
  },
  watch: {
    phone (a, b) {
      // 未通过正则校验
      if (a.search(this.phoneCheck) && this.password.search(this.passwordCheck)) {
        this.$refs.phoneIpt.focus()
        return
      }
      this.$refs.btn.className = ''
    },
    password (a, b) {
      // 未通过正则校验
      if (this.phone.search(this.phoneCheck) && a.search(this.passwordCheck)) {
        this.$refs.passwordIpt.focus()
        return
      }
      this.$refs.btn.className = ''
    }
  },
  methods: {
    login () {
      // 2 判断通过，发送请求
      this.$api.phoneLogin(this.phone, this.password).then(res => {
        if (res.code !== 200) {
          this.showError = true

          // 清楚输入框中内容
          this.phone = ''
          this.password = ''
          this.$refs.phoneIpt.focus()

          // 给定时器取个名字
          const test1 = setTimeout(() => {
            // 消除错误提示框
            this.showError = false
            // 取消定时器
            clearTimeout(test1);
          }, 2000)

        } else {
          this.$emit('login', res)
          // console.log('成功');
          // 3. 请求发送成功，保留token
          // localStorage.setItem('token', res.token)
          localStorage.setItem('id', res.account.id)
        }
      })
    }
  },
  mounted () {
    // 页面加载自动获取焦点
    this.$refs.phoneIpt.focus()
  }
}
</script>

<style lang='less'>
#MineLogin {
  position: relative;
  width: 100vw;
  height: calc(100vh - 8vw);
  overflow: hidden;
}

.pswLogin {
  width: 100vw;
  position: absolute;
  top: 5%;
  // transform: translateY(-100%);
}

.phone,
.password {
  width: 100vw;
  padding: 3vw 10vw;
  box-sizing: border-box;

  span {
    display: inline-block;
    width: 20%;
    height: 4vw;
    text-align: center;
    font-size: 4vw;
  }

  input {
    display: inline-block;
    width: 80%;
    height: 7vw;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 3vw;
    padding: 0 3vw;
    font-size: 2vw;

    outline: none;
  }
}

// 登录按钮
.loginBtn {
  position: absolute;
  bottom: 10%;
  width: 100vw;
  height: 20vw;

  button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 10vw;
    font-size: 3vw;
    border: 0px;
    border-radius: 5vw;
    background-color: red;
    color: #fff;
  }

  // 禁用登录按钮
  .banLoginBtn {
    pointer-events: none;
    background-color: #393939 !important;
  }
}

// 错误提示框
.errorBox {
  // display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 30vw;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  line-height: 25vw;
  border-radius: 3vw;

  &::after {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
    position: fixed;
    transform: translate(-50%, -50%) scale(1.2);
    left: 50%;
    top: 50%;
    z-index: 99;
  }
}
</style>
